// 分类相关业务逻辑
import { ref, onMounted } from 'vue';
import { getCategoryList } from '@/api/category';
import { useRoute } from 'vue-router';
import { onBeforeRouteUpdate } from 'vue-router';
export function useCategory() {
  // 存放 分类 数据
  const categoryData = ref({});
  // 定义路由对象 获取id
  const route = useRoute();
  // 获取分类数据
  const getCategoryData = async (id = route.params.id) => {
    // 根据 传参的方式 获取参数
    const res = await getCategoryList(id);
    categoryData.value = res.result;
  }
  onMounted(() => { getCategoryData() })
  // 我们希望 当路由参数发送变化时，重新获取分类的数据
  // 因为轮播图的数据都是一样的，所以不需要重新获取
  onBeforeRouteUpdate((to) => {
    // 因为我们是监听路由发送变化才获取数据 拿不到我们最新页面的id
    // 所以我们使用 该钩子函数的参数to 拿到最新页面的id
    // 重新获取分类的数据
    getCategoryData(to.params.id);
  });
  return {
    categoryData
  }
}
